<template>
  <router-link :to="path">
    <div
      class="select-bar-item"
      :class="{ 'select-bar-item-after': afterStyle }"
      @click="addStyle"
    >
      <span>{{ title }}</span>
    </div>
  </router-link>
</template>

<script>
export default {
  props: ["path", "title", "clickStyle", "idx"],
  created() {
    this.afterStyle = this.clickStyle;
  },
  data() {
    return {
      afterStyle: false,
      index: this.idx
    };
  },
  methods: {
    addStyle() {
      console.log("click me!");
      this.$emit("clearStyle", this.index);
    },
  },
};
</script>

<style>
.select-bar-item {
  width: 240px;
  height: 48px;
  font-size: 14px;
  color: #333333;
  line-height: 48px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
}

.select-bar-item span {
  padding: 20px;
}

a:-webkit-any-link {
  text-decoration: none;
}

.select-bar-item:hover {
  background-color: rgba(0, 110, 255, 0.0980392156862745);
}

.select-bar-item-after {
  width: 236px;
  border-left: 4px solid rgba(0, 110, 255, 1);
  background-color: rgba(0, 110, 255, 0.0980392156862745);
}
</style>